<template>
	<view class="content">
    <view class="myFacility">
      <view class="realBox">
        <view>
          当前绑定设备:{{switchTotal + tahTotal}}台
        </view>
        <view class="setIcon" @click="openPopup">
          <span>添加设备</span>
          <!-- <u-icon name="scan" color="#fff" size="48"></u-icon> -->
        </view>
      </view>
    </view>
    <view class="canvasDad">
      <view class="uniCanvas">
        <uni-ec-canvas
          class="uni-ec-canvas" 
          id="line-chart" 
          ref="canvas"
          canvas-id="lazy-load-chart" 
          :ec="ec">
        </uni-ec-canvas>
      </view>
      <view class="uniCanvasTwo">
        <uni-ec-canvas
          class="uni-ec-canvas" 
          id="line-chart" 
          ref="canvasForTwo"
          canvas-id="lazy-load-chart" 
          :ec="ecT">
        </uni-ec-canvas>
      </view>
      <view class="uniCanvasThr">
        <uni-ec-canvas
          class="uni-ec-canvas" 
          id="line-chart" 
          ref="canvasForThr"
          canvas-id="lazy-load-chart" 
          :ec="ecT">
        </uni-ec-canvas>
      </view>
    </view>
	</view>
</template>

<script>
  let chart = null
  // let chartTwo = null
  import request from '@/request/api';
  import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'
  import * as echarts from '@/components/uni-ec-canvas/echarts.min'
	export default {
		data() {
			return {
        tahTotal: 0,
        switchTotal: 0,
        ec: {
          lazyLoad: true
        },
        ecT: {
          lazyLoad: true
        },
        optionsOne: {
          backgroundColor: '#2c343c',
          xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
        },
        optionsTwo: {
          backgroundColor: '#2c343c',
          title: {
            text: 'mock data',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: [
                  { value: 335, name: '牛' },
                  { value: 310, name: '羊' },
                  { value: 274, name: '鸡' },
                  { value: 235, name: '狗' },
                  { value: 400, name: '猪' }
                ].sort(function (a, b) {
                  return a.value - b.value;
                }),
                roseType: 'radius',
                label: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                labelLine: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                },
                itemStyle: {
                  color: '#c23531',
                  shadowBlur: 200,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                  return Math.random() * 200;
                }
              }
            ]
        },
        optionsThr: {
          backgroundColor: '#2c343c',
          xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar'
            }
          ]
        }
			}
		},
    components: {
      uniEcCanvas
		},
		onLoad() {
      
		},
    onShow(){
      // this.getSwitchLength()
      // this.getTahLength()
      this.$nextTick(() => {
        this.$refs.canvas.init(this.initChartOne)
        this.$refs.canvasForTwo.init(this.initChartTwo)
        this.$refs.canvasForThr.init(this.initChartThr)
      })
    },
		methods: {
      openPopup(){
        uni.navigateTo({
          url:'./../addDevice/addDevice'
        })
      },
      getSwitchLength(){
        let switchObj = {
          url: '/mobile/switch/list',
          method: 'GET'
        }
        request(switchObj).then(res => {
          this.switchTotal = res.data.total
        })
      },
      getTahLength(){
        let tah = {
          url: '/mobile/tah/list',
          method: 'GET'
        }
        request(tah).then(res => {
          this.tahTotal = res.data.total
        })
      },
      initChartOne(canvas, width, height, canvasDpr) {
        chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: canvasDpr
        })
        canvas.setChart(chart)
        chart.setOption(this.optionsOne)
        // console.log();
        
        return chart
      },
      initChartTwo(canvas, width, height, canvasDpr) {
        chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: canvasDpr
        })
        canvas.setChart(chart)
        chart.setOption(this.optionsTwo)
        return chart
      },
      initChartThr(canvas, width, height, canvasDpr) {
        chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: canvasDpr
        })
        canvas.setChart(chart)
        chart.setOption(this.optionsThr)
        return chart
      },
      QR() {
        
			},
		}
	}
</script>

<style lang="scss" scoped>
.myFacility {
  width: 100%;
  height: 100rpx;
  background-image: linear-gradient(to right, #7979ed 40%, #a4a5ee);
  line-height: 100rpx;
  display: flex;
  justify-content: center;
  color: #fff;
}
.myFacility .realBox {
  height: 100%;
  min-width: 80%;
  width: auto;
  display: flex;
  justify-content: space-between
}
.setIcon {
  display: flex;
}

.uniCanvas {
  width: 100%;
  height: auto;
  // position: relative;
  z-index: 1;
}
.uniCanvasTwo {
  width: 100%;
  height: auto;
  position: relative;
}
.uniCanvasThr {
  width: 100%;
  height: auto;
  position: relative;
}
.uni-ec-canvas {
  width: 100%;
  height: 500rpx;
  display: block;
  margin-top: 30rpx;
}
</style>
